<template>
	<view>
		<view class="searchRow">
			<view class="leftBox">
				<view class="row" >
					<view class="val">
						<u-input v-model="params.name" placeholder="请输入关键字"></u-input>
					</view>
				</view>
			</view>
			<view class="btn" @click="goSearch">
				{{'搜索'}}
			</view>
		</view>
		<view class="tabBox">
			<u-tabs :list="tabs" @change="changeTab1"></u-tabs>
		</view>
		<view class="tabBox">
			<u-tabs :list="tabs2" @change="changeTab2" :current="tab2Current" v-if="tabs2.length"></u-tabs>
		</view>
		<scrollYBox styleText="height: calc( 100vh - 560rpx ) ;" @scrolltolower="scrolltolower" :list="list">
			<template>
				<view style="" class="goodList">
					<view class="item" v-for="(item,index) in list" :key="index" @click="handleDetail(item.id)">
						<view class="cover">
							<image :src="imgBaseUrl3+item.pic"></image>
						</view>
						<view class="content">
							<view class="name">
								{{item.name}}
							</view>
							<view class="price">
								￥{{item.price}}
							</view>
						</view>
					</view>
					
				</view>
			</template>
		</scrollYBox>				
	
		
		<uniformshoptabbarVue ref="uniformshoptabbarVue"></uniformshoptabbarVue>
	</view>
</template>

<script>
	import {shCommodityListSearchApi,shCommodityTypeListTopApi,shCommodityTypeListSecondApi} from '@/common/api/commonApi/uniformshop.js'
	import uniformshoptabbarVue from "./uniformshoptabbar.vue";
	export default {
		components:{
			uniformshoptabbarVue
		},
		data() {
			return {
				list: [],
				tabs: [
				],
				tabs2: [
				],
				params:{
					pageNo : 1,
					pageSize : 10,
					name : '',
				},
				tab2Current:0,
				total : 0,
			}
		},
		methods: {
			changeTab1(e){
				console.log(e);
				this.getTabs2(e.id);
			},
			changeTab2(e){
				console.log(e);
				this.params.typeId=e.id;
				this.getList()
				console.log(this.tab2Current)
			},
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.pageNo ++
				this.getList()
			},
			handleDetail(id){
				this.goPage("/pages/componentsC/uniformshop/uniformshopDetail",{id})
			},
			goSearch(){
				this.params.pageNo = 1	
				this.getList()
			},
			getList(){
				shCommodityListSearchApi(this.params).then(res=>{
					if(this.params.pageNo==1) this.list = []
					this.list = this.list.concat(res.result.records)
					this.total = res.result.total
				})
			},
			getTabs(){
				shCommodityTypeListTopApi().then(res=>{
					console.log(res);
				    for(let i = 0;i<res.result.length;i++){
						let item = {};
						item.name = res.result[i].name;
						item.id = res.result[i].id;
						this.tabs.push(item);
						if(i==0){
							this.getTabs2(item.id);
						}
					}
				})
			},
			getTabs2(parentId){
				this.tabs2=[];
				shCommodityTypeListSecondApi({parentId:parentId}).then(res=>{
					console.log(res);
					for(let i = 0;i<res.result.length;i++){
						let item = {};
						item.name = res.result[i].name;
						item.id = res.result[i].id;
						this.tabs2.push(item);
						if(i==0){
							this.params.typeId=item.id;
							this.getList()
						}
					}
					this.tab2Current=0;
					console.log(this.tab2Current)
				})
			},
			
		},
		onLoad() {
			this.getTabs();
			this.getList();
		},
	}
</script>

<style  lang="scss">
	.u-page__tag-item {
		@include flex(column);
		flex: 1
	}
	.m-t-10 {
		margin-top: 10px;
	}
	.tabBox{
		background-color: #fff;
		padding-bottom: 10rpx;
		margin-bottom: 15rpx;
	}
	.goodList{
		display: flex;
		flex-wrap: wrap;
		// justify-content: space-evenly;
		.item{
			margin: 10rpx 15rpx;
			width: 46%;
			height: 220rpx;
			padding: 10rpx;
			border-radius: 10rpx;
			background: #fff;
			box-shadow: 0px 0px 20px 0px rgba(102, 102, 102, 0.05);
			display: flex;
			.cover{
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 160rpx;
					height: 160rpx;
				}
			}
			
			.content{
				padding: 10rpx;
				.name{
					margin: 10rpx 0;
					font-size: 36rpx;
					font-weight: 600;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					line-clamp: 2;
					-webkit-box-orient: vertical;
					width: 140rpx;
				}
				.price{
					color: #cc463d;
					font-size: 34rpx;
				}
			}
		}
	}
	.searchRow{
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0rpx 20rpx 0 20rpx;
			border-bottom: 2rpx solid #dedede;
			height: 100rpx;
			border-radius: 50rpx;
			margin: 20rpx;
			.leftBox{
				flex: 1;
				.row{
					display: flex;
					align-items: center;
					height: 70rpx;
					padding-left: 20rpx;
					.label{
						color: #000000d9;
						margin-right: 30rpx;
					}
					.val{
						color: #595959;
					}
				}
			}
			.btn{
				width: 140rpx;
				height: 56rpx;
				border-radius: 10rpx;
				color: #fff;
				@include flexCenter;
				background-color: #4089f0;
				margin-right: 20rpx;
			}
			
	}
</style>